import React from 'react';
import { Link } from 'react-router-dom';
import { Typography, Space, Form, Input, Button, message } from 'antd';
import { UserOutlined } from '@ant-design/icons';
const { Title } = Typography;
import styles from './Register.module.scss';

export default function Register() {
    const [messageApi, contextHolder] = message.useMessage();
    const onFinish = (values: any) => {
        console.log('Success:', values);
    };
    const onFinishFailed = (errorInfo: any) => {
        messageApi.open({
            type: 'error',
            content: '正确填写表单后注册',
        });
    };
    return (
        <div className={styles.container}>
            {contextHolder}
            <div className={styles.title}>
                <Space>
                    <Title level={2}>
                        <UserOutlined style={{ fontSize: '30px' }} />
                    </Title>
                    <Title level={2}>注册新用户</Title>
                </Space>
            </div>
            <div className={styles.form}>
                <Form onFinish={onFinish} onFinishFailed={onFinishFailed}>
                    <Form.Item
                        label="用户名"
                        name="username"
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 18 }}
                        rules={[
                            { required: true, message: '请输入用户名' },
                            {
                                type: 'string',
                                min: 5,
                                max: 20,
                                message: '用户名长度为5-20位',
                            },
                        ]}
                    >
                        <Input />
                    </Form.Item>
                    {/* 昵称 */}
                    <Form.Item
                        label="昵称"
                        name="nickname"
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 18 }}
                        rules={[{ required: true, message: '请输入昵称' }]}
                    >
                        <Input />
                    </Form.Item>
                    <Form.Item
                        label="密码"
                        name="password"
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 18 }}
                        rules={[{ required: true, message: '请输入密码' }]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item
                        label="确认密码"
                        name="confirmPassword"
                        labelCol={{ span: 7 }}
                        wrapperCol={{ span: 18 }}
                        dependencies={['password']} // password变化会重新触发validator判断
                        rules={[
                            { required: true, message: '请确认密码' },
                            ({ getFieldValue }) => ({
                                validator(_, value) {
                                    if (
                                        !value ||
                                        getFieldValue('password') === value
                                    ) {
                                        return Promise.resolve();
                                    } else {
                                        return Promise.reject(
                                            new Error('两次输入的密码不一致')
                                        );
                                    }
                                },
                            }),
                        ]}
                    >
                        <Input.Password />
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 7, span: 18 }}>
                        <Space>
                            <Button type="primary" htmlType="submit">
                                注册
                            </Button>
                            <Link to="/login">已有用户，请登录</Link>
                        </Space>
                    </Form.Item>
                </Form>
            </div>
        </div>
    );
}
